<template>
  <div class="writeinfo">
    <!-- 头部标题 -->
    <div class="writeinfo-title">
      <Title message="关于作者" ids="#icon-guanyu"></Title>
    </div>
    <!-- 个人信息 -->
    <div class="myself_card">
      <p>职业：{{userInfoAndarticle.userPosition}}</p>
      <p>现居：{{userInfoAndarticle.address}}</p>
      <p>Email：{{userInfoAndarticle.userEmail}}</p>
    </div>
    <!-- 个人文章信息 -->
    <div class="w-a-count">
      <div>
        <p>文章</p>
        <span>{{userInfoAndarticle.articleNum}}</span>
      </div>
      <div>
        <p>评论</p>
        <span>{{userInfoAndarticle.commentNum}}</span>
      </div>
      <div>
        <p>关注</p>
        <span>0</span>
      </div>
      <div>
        <p>粉丝</p>
        <span>0</span>
      </div>
    </div>
    <!-- 文章展示 -->
    <div class="w-a-post-list">
      <div v-for="(item,index) in userInfoAndarticle.simpleArticle" :key="index">
        <router-link :to="'/aab/'+item.artId" class="ass">
          <span class="b2-color">[文章]</span>
          <span @click="aba">{{item.artTitle}}</span>
        </router-link>
      </div>
    </div>
    <div class="widget-mission-footer">
      <a href="#" target="_blank">Ta的全部动态</a>
    </div>
  </div>
</template>

<script>
import Title from "../title/title.vue";
import axios from "axios"
import pubsub from "pubsub-js"
export default {
  name: "WriteInfo",
  components: {
    Title,
  },
  props:["uId"],
  data() {
    return {
      userInfoAndarticle:{}
    }
  },
  mounted(){
    //获取用户信息+发布的博文
    this.getUserInfoAndArticleData()
  },
  methods:{
     aba(){
              //发布信息
           pubsub.publish('leave');
        },
     getUserInfoAndArticleData(){
       const that = this;
       axios({
          method:"post",
          url:"/aabbcc/user/simpleUserInfoAndArticles/"+that.uId,
          data:{
            uId:that.uId
          }
       }).then(function(res){
         console.log("article",res);
         if(res.data.code == 200){
            that.userInfoAndarticle = res.data.obj
         }
       })
     }
  }
};
</script>

<style scoped>
/* 头部 */
.writeinfo {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
}
/* 个人信息 */
.myself_card p {
  font-size: 12px;
  padding: 0 0 0 20px;
  line-height: 30px;
  /* text-shadow: 0 1px 2px rgb(0 0 0 / 50%); */
  color: #2882c5;
  transition: all 0.5s;
}
.myself_card {
  margin-top: 10px;
}
.myself_card > p:hover {
  transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
}
/* 个人文章信息 */
.w-a-count {
  display: flex;
  flex-flow: wrap;
  margin: 16px -16px 8px;
  background: #f5f6f7;
}
.w-a-count > div {
  width: 25%;
  text-align: center;
  margin: 10px 0;
  font-size: 14px;
}
.w-a-count span {
  font-weight: 900;
}
.w-a-count div {
  transition: all 0.5s;
}
.w-a-count div:hover {
  transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
  color: #2882c5;
}
/* 文章展示 */
.w-a-post-list > div {
  padding: 0 2px;
  font-size: 12px;
  position: relative;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  height: 20px;
  box-sizing: border-box;
  line-height: 20px;
  margin: 10px 5px;
  transition: all 0.5s;
}

.w-a-post-list > div:hover {
  transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
}
.ass {
  color: black;
}
.w-a-post-list span {
  opacity: 0.5;
  margin-right: 2px;
}
.b2-color {
  color: #2882c5;
}
.widget-mission-footer a {
    color: black;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    display: block;
    border-top: 1px solid #F5F6F7;
    font-weight: 600;
}
</style>